<template>
    <div class="edit-popup">
        <popup
            ref="popupRef"
            :title="popupTitle"
            :async="true"
            width="550px"
            @confirm="handleSubmit"
            @close="handleClose"
        >
            <el-form ref="formRef" :model="formData" label-width="90px" :rules="formRules">
                <el-form-item label="订单号" prop="order_no">
                    <el-input v-model="formData.order_no" clearable placeholder="请输入订单号" />
                </el-form-item>
                <el-form-item label="订单类型: [1-包车订单 2-接送机订单]" prop="order_type">
                    <el-input v-model="formData.order_type" clearable placeholder="请输入订单类型: [1-包车订单 2-接送机订单]" />
                </el-form-item>
                <el-form-item label="用户ID" prop="user_id">
                    <el-input v-model="formData.user_id" clearable placeholder="请输入用户ID" />
                </el-form-item>
                <el-form-item label="人数" prop="people_num">
                    <el-input v-model="formData.people_num" clearable placeholder="请输入人数" />
                </el-form-item>
                <el-form-item label="行李数" prop="baggage_num">
                    <el-input v-model="formData.baggage_num" clearable placeholder="请输入行李数" />
                </el-form-item>
                <el-form-item label="线路ID" prop="line_id">
                    <el-input v-model="formData.line_id" clearable placeholder="请输入线路ID" />
                </el-form-item>
                <el-form-item label="司机ID" prop="driver_id">
                    <el-input v-model="formData.driver_id" clearable placeholder="请输入司机ID" />
                </el-form-item>
                <el-form-item label="车牌号" prop="car_num">
                    <el-input v-model="formData.car_num" clearable placeholder="请输入车牌号" />
                </el-form-item>
                <el-form-item label="预计出发时间" prop="estimated_time">
                    <el-input v-model="formData.estimated_time" clearable placeholder="请输入预计出发时间" />
                </el-form-item>
                <el-form-item label="实际出发时间" prop="actual_time">
                    <el-input v-model="formData.actual_time" clearable placeholder="请输入实际出发时间" />
                </el-form-item>
                <el-form-item label="出发地点" prop="start_address">
                    <el-input v-model="formData.start_address" clearable placeholder="请输入出发地点" />
                </el-form-item>
                <el-form-item label="目的地点" prop="end_address">
                    <el-input v-model="formData.end_address" clearable placeholder="请输入目的地点" />
                </el-form-item>
                <el-form-item label="途径地点 多个地址" prop="way_address">
                    <el-input v-model="formData.way_address" clearable placeholder="请输入途径地点 多个地址" />
                </el-form-item>
                <el-form-item label="出行人姓名" prop="people_name">
                    <el-input v-model="formData.people_name" clearable placeholder="请输入出行人姓名" />
                </el-form-item>
                <el-form-item label="出行人电话" prop="people_phone">
                    <el-input v-model="formData.people_phone" clearable placeholder="请输入出行人电话" />
                </el-form-item>
                <el-form-item label="核验码" prop="verify_code">
                    <el-input v-model="formData.verify_code" clearable placeholder="请输入核验码" />
                </el-form-item>
                <el-form-item label="支付方式：0-未支付；1-微信支付；2-支付宝支付" prop="pay_type">
                    <el-input v-model="formData.pay_type" clearable placeholder="请输入支付方式：0-未支付；1-微信支付；2-支付宝支付" />
                </el-form-item>
                <el-form-item label="支付时间" prop="pay_time">
                    <el-input v-model="formData.pay_time" clearable placeholder="请输入支付时间" />
                </el-form-item>
                <el-form-item label="价格" prop="price">
                    <el-input v-model="formData.price" clearable placeholder="请输入价格" />
                </el-form-item>
                <el-form-item label="状态：-1-申请退款；0-待付款；1-待出行；2-司机已接单； 3-行程中；5-已完成；6-已取消" prop="order_status">
                    <el-input v-model="formData.order_status" clearable placeholder="请输入状态：-1-申请退款；0-待付款；1-待出行；2-司机已接单； 3-行程中；5-已完成；6-已取消" />
                </el-form-item>
                <el-form-item label="退款状态：0-未退款；1-退款中；2-退款成功；3-退款失败" prop="refund_status">
                    <el-input v-model="formData.refund_status" clearable placeholder="请输入退款状态：0-未退款；1-退款中；2-退款成功；3-退款失败" />
                </el-form-item>
                <el-form-item label="退款金额" prop="refund_price">
                    <el-input v-model="formData.refund_price" clearable placeholder="请输入退款金额" />
                </el-form-item>
                <el-form-item label="退款时间" prop="refund_time">
                    <el-input v-model="formData.refund_time" clearable placeholder="请输入退款时间" />
                </el-form-item>
                <el-form-item label="取消类型：0-用户取消；1-司机取消；2-系统取消" prop="cancel_type">
                    <el-input v-model="formData.cancel_type" clearable placeholder="请输入取消类型：0-用户取消；1-司机取消；2-系统取消" />
                </el-form-item>
                <el-form-item label="取消描述" prop="cancel_desc">
                    <el-input v-model="formData.cancel_desc" clearable placeholder="请输入取消描述" />
                </el-form-item>
                <el-form-item label="取消时间" prop="cancel_time">
                    <el-input v-model="formData.cancel_time" clearable placeholder="请输入取消时间" />
                </el-form-item>
                <el-form-item label="取消原因" prop="cancel_reason">
                    <el-input v-model="formData.cancel_reason" clearable placeholder="请输入取消原因" />
                </el-form-item>
                <el-form-item label="完成时间" prop="complete_time">
                    <el-input v-model="formData.complete_time" clearable placeholder="请输入完成时间" />
                </el-form-item>
                <el-form-item label="完成描述" prop="complete_desc">
                    <el-input v-model="formData.complete_desc" clearable placeholder="请输入完成描述" />
                </el-form-item>
            </el-form>
        </popup>
    </div>
</template>

<script lang="ts" setup name="orderEdit">
import type { FormInstance } from 'element-plus'
import Popup from '@/components/popup/index.vue'
import { apiOrderAdd, apiOrderEdit, apiOrderDetail } from '@/api/order'
import { timeFormat } from '@/utils/util'
import type { PropType } from 'vue'
defineProps({
    dictData: {
        type: Object as PropType<Record<string, any[]>>,
        default: () => ({})
    }
})
const emit = defineEmits(['success', 'close'])
const formRef = shallowRef<FormInstance>()
const popupRef = shallowRef<InstanceType<typeof Popup>>()
const mode = ref('add')


// 弹窗标题
const popupTitle = computed(() => {
    return mode.value == 'edit' ? '编辑订单表' : '新增订单表'
})

// 表单数据
const formData = reactive({
    id: '',
    order_no: '',
    order_type: '',
    user_id: '',
    people_num: '',
    baggage_num: '',
    line_id: '',
    driver_id: '',
    car_num: '',
    estimated_time: '',
    actual_time: '',
    start_address: '',
    end_address: '',
    way_address: '',
    people_name: '',
    people_phone: '',
    verify_code: '',
    pay_type: '',
    pay_time: '',
    price: '',
    order_status: '',
    refund_status: '',
    refund_price: '',
    refund_time: '',
    cancel_type: '',
    cancel_desc: '',
    cancel_time: '',
    cancel_reason: '',
    complete_time: '',
    complete_desc: '',
})


// 表单验证
const formRules = reactive<any>({
    order_no: [{
        required: true,
        message: '请输入订单号',
        trigger: ['blur']
    }],
    order_type: [{
        required: true,
        message: '请输入订单类型: [1-包车订单 2-接送机订单]',
        trigger: ['blur']
    }],
    user_id: [{
        required: true,
        message: '请输入用户ID',
        trigger: ['blur']
    }],
    people_num: [{
        required: true,
        message: '请输入人数',
        trigger: ['blur']
    }],
    baggage_num: [{
        required: true,
        message: '请输入行李数',
        trigger: ['blur']
    }],
    line_id: [{
        required: true,
        message: '请输入线路ID',
        trigger: ['blur']
    }],
    driver_id: [{
        required: true,
        message: '请输入司机ID',
        trigger: ['blur']
    }],
    car_num: [{
        required: true,
        message: '请输入车牌号',
        trigger: ['blur']
    }],
    estimated_time: [{
        required: true,
        message: '请输入预计出发时间',
        trigger: ['blur']
    }],
    start_address: [{
        required: true,
        message: '请输入出发地点',
        trigger: ['blur']
    }],
    end_address: [{
        required: true,
        message: '请输入目的地点',
        trigger: ['blur']
    }],
    people_name: [{
        required: true,
        message: '请输入出行人姓名',
        trigger: ['blur']
    }],
    people_phone: [{
        required: true,
        message: '请输入出行人电话',
        trigger: ['blur']
    }],
    verify_code: [{
        required: true,
        message: '请输入核验码',
        trigger: ['blur']
    }],
})


// 获取详情
const setFormData = async (data: Record<any, any>) => {
    for (const key in formData) {
        if (data[key] != null && data[key] != undefined) {
            //@ts-ignore
            formData[key] = data[key]
        }
    }
    
    
}

const getDetail = async (row: Record<string, any>) => {
    const data = await apiOrderDetail({
        id: row.id
    })
    setFormData(data)
}


// 提交按钮
const handleSubmit = async () => {
    await formRef.value?.validate()
    const data = { ...formData,  }
    mode.value == 'edit' 
        ? await apiOrderEdit(data) 
        : await apiOrderAdd(data)
    popupRef.value?.close()
    emit('success')
}

//打开弹窗
const open = (type = 'add') => {
    mode.value = type
    popupRef.value?.open()
}

// 关闭回调
const handleClose = () => {
    emit('close')
}



defineExpose({
    open,
    setFormData,
    getDetail
})
</script>
